<template>
	<!-- 财富 -->
	<view class="containers">
		<!-- #ifndef MP-WEIXIN -->
		<headNav></headNav>
		<!-- #endif -->
		<scroll-view scroll-y class="scroll">
			<view class="content">
				<view class="content-top">
					<view class="content-header">
						<view class="left">
							<view class="title">总资产</view>
							<view class="price">0.00</view>
						</view>
						<view class="right">
							<view class="title">最新收益</view>
							<view class="price">0.00</view>
						</view>
					</view>
					<view class="content-body">
						<view class="body-header">
							<navigator :url="item.url" v-for="item in navData" :key="item.id" style="width: 20%;">
								<view class="header-item" >
									<image :src="item.imgSrc" mode=""></image>
									<view class="title">
										{{item.text}}
									</view>
								</view>
							</navigator>
						</view>
						<view class="body-content">
							<view class="quotation">
								<view class="quotation-header" style="margin-top: 10rpx;margin-bottom: 20rpx;">
									<view class="line"></view>
									<view class="title">行情</view>
								</view>
								<view class="cu-card case card" >
									<view class="cu-item shadow">
										<view class="item-container">
											<view class="card-item" v-for="item in quotation" :key="item.id">
												<view class="item-title">
													{{item.text}}
												</view>
												<view class="item-price">
													{{item.price}}
												</view>
												<view class="item-prcent">
													{{item.prcent}} {{item.prcents}}
												</view>
											</view>
										</view>
										<view class="card-btm">
											<view class="btm-item">
												新年福利 速领50元红包
											</view>
											<view class="btm-items">
												新年福利 速领50元红包
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="cu-card case card">
								<view class="cu-item shadow">
									<image src="../../static/wealth/img1.png" class="centerImg"></image>
								</view>
							</view>
							<view class="fund" style="margin-top: 10rpx;margin-bottom: 20rpx;">
								<view class="fund-header">
									<view class="line"></view>
									<view class="title">基金投顾</view>
								</view>
								<view class="cards">
									<view class="cu-card case card">
										<view class="cu-item shadow">
											<view class="item-container">
												<view class='cu-tag light bg-blue radius' style="width: 50%;">智能投顾
												</view>
												<view class="title">测一测适合那种组合</view>
												<view class="titles">精心打造 专属方案</view>
												<navigator url="" style="display: flex;align-items: center;">去测评<i
														class="cuIcon-right"></i></navigator>
											</view>
										</view>
									</view>
									<view class="cu-card case card">
										<view class="cu-item shadow">
											<view class="item-container">
												<view class='cu-tag light bg-blue radius' style="width: 50%;">追求高收益
												</view>
												<view class="title">南方股债轮动进去组</view>
												<view class="titles">近1年收益59.15%</view>
												<navigator url="" style="display: flex;align-items: center;">查看详情<i
														class="cuIcon-right"></i></navigator>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="popularFunds" >
								<view class="popularFunds-header" style="margin-top: 10rpx;margin-bottom: 20rpx;">
									<view class="line"></view>
									<view class="title"
										style="display: flex;justify-content: space-between;flex-grow: 1;">
										<text>热门基金</text><i class="cuIcon-right"></i></view>
								</view>
								<view class="popularFunds-content">
									<view class="titles">
										<view class="title-item" v-for="(item,index) in popularFunds" :key="item.id"
											:class="index == popularFundsId ? 'active' : ''" @tap="changeId(index)">
											{{item.text}}
										</view>
									</view>
									<view class="swipers">
										<swiper class="swiperList" :current="popularFundsId" duration="500"
											@change="changeTabId">
											<swiper-item v-for="(item) in popularFunds" :key="item.id"
												class="swiper-item">
												<scroll-view  scroll-y @scrolltolower="onRechBottom">
													<view class="goodsList">
														<block v-for="(items) in popularFundsData" :key="items.id">
															<view class="goods-item cu-card case crad">
																<view class="cu-item shadow">
																	<view class="title">
																		{{items.title}}
																		<view class='cu-tag light bg-orange radius' v-if="items.tag" style="width: 20%;margin-left: 20rpx;">智能投顾
																		</view>
																	</view>
																	<view class="container">
																		<view class="first">
																			<view class="counts">
																				{{items.prcent}}
																			</view>
																			<view class="label">
																				近一年收益率
																			</view>
																		</view>
																		<view class="first">
																			<view class="count">
																				{{items.ranking}}
																			</view>
																			<view class="label">
																				同类排名
																			</view>
																		</view>
																		<view class="first">
																			<view class="count">
																				{{items.content}}
																			</view>
																			<view class="label">
																				{{items.contents}}
																			</view>
																		</view>
																	</view>
																</view>
															</view>
														</block>
													</view>
												</scroll-view>
											</swiper-item>
										</swiper>
									</view>
								</view>
							</view>
						</view>
					</view> 
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headNav from '../../component/headNav/headNav.vue'
	export default {
		components: {
			headNav
		},
		data() {
			return {
				navData: [{
						id: 1,
						text: '活期',
						imgSrc: '../../static/wealth/nav1.png',
						url:"../../pages/current/current"
					},
					{
						id: 2,
						text: '定期',
						imgSrc: '../../static/wealth/nav2.png',
						url:"../../pages/regular/regular"
					},
					{
						id: 3,
						text: '基金',
						imgSrc: '../../static/wealth/nav3.png',
						url:"../../pages/fund/fund"
					},
					{
						id: 4,
						text: '黄金',
						imgSrc: '../../static/wealth/nav4.png',
						url:"../../pages/gold/goldMess"
					},
					{
						id: 5,
						text: '股票',
						imgSrc: '../../static/wealth/nav5.png',
						url:""
					},
					{
						id: 6,
						text: '稳健精选',
						imgSrc: '../../static/wealth/nav6.png',
						url:""
					},
					{
						id: 7,
						text: '天天利财',
						imgSrc: '../../static/wealth/nav7.png',
						url:""
					},
					{
						id: 8,
						text: '基金投顾',
						imgSrc: '../../static/wealth/nav8.png',
						url:"../../pages/current/current"
					},
					{
						id: 9,
						text: '我的理财',
						imgSrc: '../../static/wealth/nav9.png',
						url:"../../pages/current/current"
					},
					{
						id: 10,
						text: '高端理财',
						imgSrc: '../../static/wealth/nav10.png',
						url:"../../pages/current/current"
					},
				],
				quotation: [{
						id: 1,
						text: '深圳成指',
						price: '14828.80',
						prcent: '-41.86',
						prcents: '-0.28%'
					},
					{
						id: 2,
						text: '上证指数',
						price: '14828.80',
						prcent: '-41.86',
						prcents: '-0.28%'
					},
					{
						id: 3,
						text: '创业板指',
						price: '14828.80',
						prcent: '-41.86',
						prcents: '-0.28%'
					},
				],
				popularFunds: [{
						id: 1,
						text: '推荐'
					},
					{
						id: 2,
						text: '稳健之选'
					},
					{
						id: 3,
						text: '长跑之选'
					},
					{
						id: 4,
						text: '港股精选'
					},
				],
				popularFundsId: 0,
				popularFundsData: [{
						id: 1,
						title: '广发资源优选A股',
						tag: '政策利好',
						prcent: '88.23%',
						ranking: '前5%',
						content: '周期行业',
						contents: '大宗商品 库存低位'
					},
					{
						id: 2,
						title: '南方新优享混合',
						tag: '',
						prcent: '55.30%',
						ranking: '前10%',
						content: '大国制造',
						contents: '基建制造 转型升级'
					},
					{
						id: 3,
						title: '汇添富双利债券A',
						tag: '政策利好',
						prcent: '79.36%',
						ranking: '前10%',
						content: '长青板块',
						contents: '白酒+消费内循环'
					}
				]
			}
		},
		methods: {
			changeTabId(e) {
				this.popularFundsId = e.detail.current
			},
			onRechBottom(){
				
			},
			changeId(index){
				this.popularFundsId = index
			},
		}
	}
</script>

<style scoped lang="scss">
	.containers {
		height: 100vh;
		display: flex;
		flex-direction: column;

		/* #ifndef MP-WEIXIN */
		.scroll {
			width: 100%;
			height: calc(100vh - 280rpx);
		}

		.content {
			width: 100%;
			background-color: #3476f1;
			display: flex;
			align-items: flex-end;
		}

		/* #endif */
		/* #ifdef MP-WEIXIN */
		.scroll {
			width: 100%;
			height: 100vh;
		}

		.content {
			width: 100%;
			background-color: #3476f1;
			display: flex;
			align-items: flex-end;
		}

		/* #endif */
		.content-top {
			width: 100%;
			flex-grow: 1;
			background-color: #ffe3c0;
			border-radius: 50rpx 0rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			.content-header {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left,
				.right {
					height: 100%;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					color: #333333;

					.title {
						font-size: 30rpx;
					}

					.price {
						font-size: 35rpx;
						font-weight: bold;
					}
				}
			}

			.content-body {
				width: 100%;
				flex-grow: 1;
				background-color: #fafafa;
				border-radius: 50rpx 0rpx 0rpx 0rpx;
				.body-header {
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					width: 100%;
					height: 350rpx;
					padding: 25rpx 10rpx;
					.header-item {
						width: 100%;
						height: 140rpx;
						text-align: center;
						color: #666666;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;

						image {
							width: 70rpx;
							height: 70rpx;
						}
					}
				}
				.body-content {
					width: 100%;
					.quotation {
						box-sizing: border-box;
						padding: 10rpx 25rpx;

						.quotation-header {
							height: 60rpx;
							display: flex;
							align-items: center;

							.line {
								width: 10rpx;
								height: 100%;
								background-color: #3476f1;
								border-radius: 0 10rpx 10rpx 0;
							}

							.title {
								margin-left: 20rpx;
								font-weight: bold;
								font-size: 40rpx;
							}
						}

						.card {
							width: 100%;
							height: 330rpx;
							margin-top: 20rpx;
							background-color: #ffffff;
							border-radius: 20rpx;
							box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.1);

							.item-container {
								display: flex;
								justify-content: space-between;

								.card-item {
									width: 30%;
									height: 220rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-evenly;
									align-items: center;

									.item-title {
										color: #333333;
										font-size: 30rpx;
									}

									.item-price {
										color: #f85656;
										font-size: 36rpx;
										font-weight: bold;
									}

									.item-prcent {
										color: #f85656;
									}
								}
							}

							.card-btm {
								width: 100%;
								height: 50rpx;
								background-color: rgba(52, 118, 241, 0.2);
								border-radius: 8rpx;
								padding: 0 10rpx;
								box-sizing: border-box;
								display: flex;

								.btm-item {
									background-image: url('../../static/wealth/card1.png');
									background-repeat: no-repeat;
									padding-left: 50rpx;
									background-size: 30rpx 30rpx;
									background-position: 10rpx center;
									font-size: 25rpx;
									line-height: 50rpx;
								}

								.btm-items {
									background-image: url('../../static/wealth/card2.png');
									background-repeat: no-repeat;
									padding-left: 50rpx;
									background-size: 30rpx 30rpx;
									background-position: 10rpx center;
									font-size: 25rpx;
									line-height: 50rpx;
									margin-left: 10rpx;
								}
							}
						}
					}

					.centerImg {
						width: 100%;
						height: 180rpx;
					}

					.fund {
						box-sizing: border-box;
						padding: 10rpx 25rpx;

						.fund-header {
							height: 60rpx;
							display: flex;
							align-items: center;

							.line {
								width: 10rpx;
								height: 100%;
								background-color: #3476f1;
								border-radius: 0 10rpx 10rpx 0;
							}

							.title {
								margin-left: 20rpx;
								font-weight: bold;
								font-size: 40rpx;
							}
						}

						.cards {
							display: flex;
							height: 240rpx;

							.card {
								flex-grow: 1;
								width: 50%;

								.cu-item {
									margin: 10rpx;
									height: 100%;

									.item-container {
										height: 100%;
										padding: 15rpx 30rpx;
										box-sizing: border-box;
										display: flex;
										flex-direction: column;
										justify-content: space-evenly;

										.title {
											color: #333333;
											font-size: 30rpx;
											font-weight: bold;
										}

										.titles {
											color: #999999;
											font-size: 24rpx;
										}
									}
								}
							}
						}
					}

					.popularFunds {
						box-sizing: border-box;
						padding: 10rpx 25rpx;

						.popularFunds-header {
							height: 60rpx;
							display: flex;
							align-items: center;

							.line {
								width: 10rpx;
								height: 100%;
								background-color: #3476f1;
								border-radius: 0 10rpx 10rpx 0;
							}

							.title {
								margin-left: 20rpx;
								font-weight: bold;
								font-size: 40rpx;
							}
						}

						.popularFunds-content {
							.titles {
								display: flex;
								justify-content: space-around;
								height: 80rpx;
								align-items: center;
								color: #999999;

								.active {
									background-color: #3476f1;
									padding: 10rpx 20rpx;
									border-radius: 10rpx;
									color: #fff;
									box-sizing: border-box;
								}
							}

							.swipers {
								height: 600rpx;
								.swiperList {
									height: 100%;
									.goods-item{
										height: 200rpx;
										.cu-item{
											margin: 0;
											height: 100%;
											padding: 20rpx 20rpx;
											box-sizing: border-box;
											.title{
												font-size: 30rpx;
												color: #333333;
												font-weight: bold;
											}
											.container{
												display: flex;
												justify-content: space-between;
												height: 100%;
												padding-bottom: 20rpx;
												.first{
													display: flex;
													flex-direction: column;
													justify-content: space-evenly;
													text-align: center;
													.counts{
														font-size: 40rpx;
														color: #f85656;
														font-weight: bold;
													}
													.count{
														color: #333333;
														font-size: 35rpx;
														font-weight: bold;
													}
													.label{
														color: #999999;
														font-size: 24rpx;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
